<template>
  <view class="tab-page group">
	  
	  <view class="header">
	  	<view class="basj">
	  		<image @click="gobacks" src="/static/dazi/bak.png" mode=""></image>
	  		<text class="title">新的朋友</text>
	  	</view>
	  
	  </view>

<!--    <view class="header">
      <text class="title">新的朋友</text>
    </view> -->
    <view class="group-tip" v-if="codes.length==0">
      没有好友申请
    </view>

    <view class="group-items" v-else>
      <scroll-view class="scroll-bar" @scrolltolower="loadMore" scroll-with-animation="true" scroll-y="true">
        <apply-list-item @onOperate="flush" :moment="codes"></apply-list-item>
      </scroll-view>
    </view>
  </view>
</template>
<script>

import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import ApplyListItem from "../../components/friend-apply-list-item/friend-apply-list-item.vue";

export default {
  components: {ApplyListItem, UniIcons},
  data() {
    return {
      canLoadMore: true,
      codes: [],
      queryParams: {
        type: 'apply',
        page: 1,
        size: 10
      }
    }
  },
  methods: {
	  gobacks() {
	  
	  	// #ifdef H5
	  	history.back();
	  	// #endif
	  
	  	// #ifdef APP
	  	uni.navigateBack()
	  	// #endif
	  
	  },
    onNavBack() {
      uni.switchTab({
        url: "/pages/mine/mine"
      })
    },
    loadMore() {
      console.log(this.queryParams)
      if (!this.canLoadMore) {
        return
      }
      this.canLoadMore = false
      this.queryParams.page++
      this.status = 'loading'
      this.$http({
        url: '/friend/apply-list',
        method: 'GET',
        data: this.queryParams

      }).then((res) => {
        this.codes = this.codes.concat(res.list)
        console.log(res.hasNextPage)
        if (res.hasNextPage) {
          this.canLoadMore = true
        } else {
          uni.showToast({
            title: `没有更多了`,
            icon: 'none',
            duration: 1500
          });
        }
      })
    },


    flush() {
      this.queryParams.page = 1
      this.getList()
    },


    getList() {
      this.status = 'loading'
      this.$http({
        url: '/friend/apply-list',
        method: 'GET',
        data: this.queryParams
      }).then((res) => {
        this.codes = res.list
      })
    },

  },
  onLoad() {
    this.getList();
  },
}
</script>

<style lang="scss" scoped>
	
	.basj {
		display: flex;
		align-items: center;
		height: 60rpx;
	
		image {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}
	
		.title {
			margin-left: 10rpx;
			color: #2A222F;
			font-size: 40rpx;
		}
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		padding: 5px 20rpx;
		// background-color: #f8f8f8;
		// line-height: 50px;
		// font-size: 30rpx;
		letter-spacing: 2rpx;
		/* 字母间距 */
		font-weight: 600;
		// border: #dddddd solid 1px;
	
		.btn-side {
			position: absolute;
			line-height: 60rpx;
			font-size: 28rpx;
			cursor: pointer;
	
			&.right {
				right: 30rpx;
			}
		}
	}
	
// .header {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   height: 60rpx;
//   padding: 5px;
//   background-color: #f8f8f8;
//   line-height: 50px;
//   font-size: 30rpx;
//   letter-spacing: 2rpx; 
//   font-weight: 600;
//   border: #dddddd solid 1px;

//   .btn-side {
//     position: absolute;
//     line-height: 60rpx;
//     font-size: 28rpx;
//     cursor: pointer;

//     &.right {
//       right: 30rpx;
//     }
//   }
// }
.btn-side {
  position: absolute;
  line-height: 60rpx;
  font-size: 28rpx;
  cursor: pointer;

  &.left {
    left: 30rpx;
  }

  &.right {
    right: 30rpx;
  }
}

.group {
  position: relative;
  border: #dddddd solid 1px;
  display: flex;
  flex-direction: column;

  .nav-bar {
    margin: 5rpx;
    display: flex;
    align-items: center;
    background-color: white;
  }

  .nav-search {
    line-height: 36px;
    flex: 1;
    display: flex; /* 让 .nav-search 也成为一个 flex 容器 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
  }

  .nav-add {
    padding-right: 20rpx;
    line-height: 36px;
    cursor: pointer;
  }

  .group-tip {
    position: absolute;
    top: 400rpx;
    padding: 50rpx;
    text-align: left;
    line-height: 50rpx;
    color: #10AEFF;
    font-size: 30rpx;
  }

  .group-items {
	  margin-top: 40rpx;
    flex: 1;
    padding: 0;
    // border: #dddddd solid 1px;
    overflow: hidden;
    position: relative;

    .scroll-bar {
      height: 100%;
    }
  }
}
</style>
